<template>
  <div class="page_upload_my_love">
    <div class="upload_title_img"></div>
    <div class="upload_name_container">
      <div class="upload_name_img_box">
        <img src="@/assets/img/upload_man.png"
             class="man"
             alt="男生">
        <img src="@/assets/img/upload_love.png"
             class="love"
             alt="爱情">
        <img src="@/assets/img/upload_woman.png"
             class="woman"
             alt="女生">
      </div>
      <div class="upload_input_box flex align-center justify-between">
        <div class="upload_input_item flex align-center ">
          <input type="text"
                 @focus="focusType = 1"
                 v-model="formDate.boy"
                 maxlength="5"
                 placeholder="请输入男生名字">
          <img v-show="focusType == 1"
               @click="formDate.boy = ''"
               src="@/assets/img/input_del.png"
               alt="删除">
        </div>
        <div class="upload_input_item flex align-center ">
          <input type="text"
                 @focus="focusType = 2"
                 v-model="formDate.girl"
                 @click="formDate.girl = ''"
                 maxlength="5"
                 placeholder="请输入男生名字">
          <img v-show="focusType == 2"
               src="@/assets/img/input_del.png"
               alt="删除">
        </div>
      </div>

      <div @click="showLoveDate= true"
           class="btn_choose_time flex align-center justify-between">
        <span>{{alreadySelectDate&&formDate.loveDate?formDate.loveDate:"选择爱情开始的时间"}}</span>
        <img src="@/assets/img/upload_time.png"
             alt="时间">
      </div>
      <p class="we_are_together">我们在一起了</p>

      <div class="dashed"></div>

      <p class="our_lover_title">我们的爱情宣言</p>

      <div class="our_lover_textarea">
        <textarea v-model="formDate.blessing"
                  maxlength="50"
                  placeholder="请输入爱情宣言"></textarea>
        <div @click="changeBlessing"
             class="change_blessing flex align-center ">
          <img src="@/assets/img/upload_nexr.png"
               alt="切换">
          <span>换一句</span>
        </div>
      </div>
    </div>

    <div class="upload_pic_container">
      <div class="upload_pic_title flex align-center  justify-between ">
        <img src="@/assets/img/upload_aside_title.png">
        <span>最多六张</span>
      </div>
      <div class="flex flex-warp">
        <div v-if="picList.length<6"
             class="upload_pic_item upload_pic_item_add  flex align-center justify-center ">
          <img src="@/assets/img/upload_add.png">

          <input class="file"
                 ref="file"
                 type='file'
                 accept="image/*"
                 @change="selectImg" />

        </div>
        <div v-for="(item, index) in picList"
             :key="index"
             class="upload_pic_item">
          <img class="user_pic"
               :src="item.url">
          <div @click="handleDelPic(index)"
               class="close"> <img class="close"
                 src="@/assets/img/x.png"></div>
          <div v-if="index === 0"
               class="btn_first">封面照</div>
        </div>
      </div>
    </div>

    <div @click="handleCreateMylove"
         class="create_my_love">
      生成我的爱情主页
    </div>

    <Dialog @close="handleLoveDateClose"
            :show="showLoveDate">
      <div class="datetime-content"
           :class="showLoveDate?'show':'hide'">
        <van-datetime-picker @cancel="showLoveDate = false"
                             @confirm="onConfirmLoveDate"
                             v-model="nowTime"
                             type="date"
                             title="选择年月日"
                             :max-date="maxDate" />

      </div>
    </Dialog>

  </div>
</template>

<script>
import Dialog from "@/components/dialog/dialog"
export default {
  components: {
    Dialog
  },
  data() {
    return {
      focusType: 0, // 0 未聚焦 1 男生 2 女生
      formDate: {
        girl: '',
        boy: '',
        loveDate: '',
        blessing: '',
      },
      nowTime: new Date(),
      alreadySelectDate: false,

      blessingList: [],
      picList: [],

      showLoveDate: false,
      maxDate: new Date()
    }
  },
  created() {
    this.getBlessingList()
  },
  methods: {
    handleLoveDateClose() {
      this.showLoveDate = false
    },
    handleCreateMylove() {
      if (!this.formDate.boy) {
        this.$toast('请输入男生名字!')
        return
      } else if (!this.formDate.girl) {
        this.$toast('请输入女生名字!')
        return
      } else if (!this.formDate.blessing) {
        this.$toast('请输入爱情宣言!')
        return
      } else if (!this.formDate.loveDate || !this.alreadySelectDate) {
        this.$toast('请选择爱情开始时间!')
        return
      } else if (!this.picList.length) {
        this.$toast('请上传至少一张图片!')
        return
      }
      if (Math.random() > 0.5) {
        this.$router.replace('/myLovePage')
      } else {
        this.$router.push("/errPage/1")
      }
    },
    onConfirmLoveDate(e) {
      console.log(e,);
      this.formDate.loveDate = this.formatTime(e)

      this.showLoveDate = false
      this.alreadySelectDate = true
    },
    formatTime(time) {
      let date = new Date(time)
      let y = date.getFullYear()
      let M = date.getMonth() + 1
      let d = date.getDate()
      return `${y}年${this.fillZero(M)}月${this.fillZero(d)}日`
    },
    fillZero(num) {
      num = num.toString()
      return num[1] ? num : '0' + num
    },
    handleDelPic(index) {
      this.picList.splice(index, 1)
    },
    selectImg(e) {
      let file = e.target.files[0]
      if (!file) {
        return
      }
      let size = Math.floor(file.size / 1024);
      if (size > 5 * 1024 * 1024) {
        alert('请选择5M以内的图片！');
        return false
      }

      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = e => {
        let url = e.target.result
        this.picList.push({
          type: file.type,
          url
        })
        this.$refs.file.value = null;
      }
    },
    getBlessingList() {
      this.$api.apiHomeBlessing().then(res => {
        console.log('祝福语列表', res);
        this.blessingList = res.data.text
        this.changeBlessing()
      })
    },
    getIntRandom(lowerValue, upperValue) {
      return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
    },
    changeBlessing() {
      this.formDate.blessing = this.blessingList[this.getIntRandom(0, this.blessingList.length - 1)]
    }
  }
}
</script>

<style lang="scss"  socped >
@import "./css/uploadMyLove.scss";
</style>